<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>订单确认</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/mui.min.css" />
    <link rel="stylesheet" href="${base!}/assets/front/h5/css/hryc.css" />
    <link rel="stylesheet" href="${base!}/assets/front/newH5/css/index.css?v=${@date.getDateTime()}" />
    <!--App自定义的css-->
    <!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
    <style>
        [v-cloak]{
            display: none !important;
        }
    </style>
</head>
<body  class="simp_hasfooter">
<div id="order">

<header class="mui-bar mui-bar-nav top-color">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
    <h1 class="mui-title" style="color: white;">
        订单确认
    </h1>
</header>

<div class="mui-card" style="margin-top: 60px;">
    <div class="mui-card-header" onclick="goAddress()">
        <a class="mui-navigate-right" >
        收货地址
       </a>
    </div>
    <div class="mui-card-header"  v-if ='address!=null'>
        <span>{{address.fullName}}</span><span>{{address.mobile}}</span>
    </div>

    <div class="mui-card-content" v-if ='address!=null'>
        <div class="mui-card-content-inner" >
            {{address.address}}
        </div>
    </div>
    <div class="mui-card-content" v-if ='address==null'>
        <div class="mui-card-content-inner" >
            您还未添加收货地址
        </div>
    </div>
</div>

<div class="mui-card" >
    <div class="mui-card-header" >
        商品金额<span style="color: #ff3535;">￥{{zongPrice}}</span>
    </div>
    <div class="mui-card-header" style="-webkit-user-select:text !important;">
        <div style="-webkit-user-select:auto !important;">积分抵扣:&nbsp<input id="integralNum" placeholder="" v-on:blur="useIntegral()"  style="height: 32px; width: 100px; margin-left: 3px;-webkit-user-select:text !important;" value=""></div>
        (剩余积分：{{memberIntegral.useAbleIntegral}})
        <input type="hidden" :value="memberIntegral.useAbleIntegral" id="totalIntegral">
    </div>
    <div class="mui-card-header">
        <p><span>说明：</span>1积分抵扣1分钱</p>
    </div>
    <div class="mui-card-header">
        <input type="hidden" id="freight" value="${freightMoney}">
        运费<span style="color: #ff3535;">￥${freightMoney}</span>
    </div>
    <!--<div class="mui-card-header">-->
        <!--优惠劵<span style="color: red;">￥10.00</span>-->
    <!--</div>-->
</div>

<div class="mui-card">
    <div class="mui-card-content" v-for="good in goodsList" :key="good.id">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" >
                <a href="#">
                    <img class="mui-media-object mui-pull-left" style="width: 100px;height: 100px;" :src="good.imgList">
                    <div class="mui-media-body" style="white-space:normal;" >
                        <span>{{good.name}}</span>
                        <p style="margin-top: 35px;" >
                            <span class="jiage-text">￥{{good.price}}</span>
                            <span>*{{good.num}}</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="mui-content-padded" style="color: #999999;text-align: center" v-if="coupons==''">
    暂无可用优惠券
</div>
    <div class="mui-content-padded" v-if="coupons!=''">
    可用优惠劵
    <select class="mui-btn mui-btn-block" v-on:onchange="selectCoupon(this.value)" v-model="couponId">
        <option  :value="item.couponId" v-for="item in coupons" :key="item.id">
            {{item.sales_coupon!='null'?item.sales_coupon.name:'暂无可用优惠劵'}}
        </option>
    </select>
</div>

<nav class="mui-bar mui-bar-tab" style="background: #ffffff;padding: 10px;border-top: 1px solid #e5e5e5;" >
    <div class="mui-input-row mui-password" style="border: 0px;">
        <button type="button" id="place"  class="mui-btn mui-btn-primary" style="width: 30%;top: 0px;line-height:1;
            border: 0;background-color:#ff3535;" v-on:click="save()">立即支付</button>
        <button type="button" style="width: 70%;top: 0px;line-height:1;border: 0;text-align: left;background: none"
                class="mui-btn mui-btn-primary" id="review">
            <span>应付:</span><span id="zongPriceSp" style="color: #ff3535;padding-left: 10px;font-size: 18px;">{{zongPrice2}}元</span>
        </button>
    </div>
</nav>
</div>
<script type="text/javascript" src="${base!}/assets/front/h5/js/mui.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/vue.js" ></script>
<script type="text/javascript" src="${base!}/assets/front/h5/js/jquery-2.0.0.min.js" ></script>
<script type="text/javascript" src="${base!}/assets/decorate/pc/decoratecommon/js/layer/mobile/layer.js" ></script>
<script type="application/javascript">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var productList = '${productList}';

    var vue = new Vue({
        el: '#order',
        data: {
            address: '',
            order:'',
            goodsList:[],
            totoalProductPrice:'',
            zongPrice:0,
            zongPrice2:0,
            zongPrice3:0,
            yunPrice:0,
            coupons:[],
            couponId:'',
            couponPrice:0,
            sales_coupon:'',
            productNum:0,
            memberIntegral:'',
            integralMoney:1
        },
        created:function () {   //实例初始化创建完成执行

            this.defaultAddress();    //调用自身方法
            this.getOrderProductList();
            this.getIntegral();

        },
        methods:{              //定义封装方法
            //获取默认收货地址
            defaultAddress:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/address/defaultAddress.html",
                    dataType:"JSON",
                    data:{

                    },
                    success:function(data){
                        if (data.code == 0) {
                            var d = data.data;
                            self.address = d;
                        } else {

                        }
                    }
                });

            },
            useIntegral:function(){
                var integral= $("#integralNum").val();
                var totalIntegral= $("#totalIntegral").val()*1;
                if(integral>totalIntegral){
                    layer.open({
                        content: "可用积分不足!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    $("#integralNum").val(totalIntegral);
                }
                this.zongPrice2=this.zongPrice3;
                if(integral/(this.integralMoney*1)>=this.zongPrice2-$("#freight").val()*1){
                    layer.open({
                        content: "兑换积分数量不能大于或等于商品总价!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    return;
                }
                this.zongPrice2=this.zongPrice2-integral/(this.integralMoney*1);
                this.zongPrice2=this.zongPrice2.toFixed(2);
            },
            //获取确认商品
            getOrderProductList:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/product/getOrderProductList.html",
                    dataType:"JSON",
                    data:{
                        productList:productList
                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.goodsList = data.data;
                            var price = 0;
                            for(var o=0;o<self.goodsList.length;o++){
                                self.productNum=self.productNum+self.goodsList[o].num*1;
                                price = price + parseFloat(self.goodsList[o].price)*self.goodsList[o].num;
                            }
                            self.zongPrice=price.toFixed(2);
                            self.totoalProductPrice=self.zongPrice;
                            self.zongPrice2=self.zongPrice*1+$("#freight").val()*1;
                            self.zongPrice2=self.zongPrice2.toFixed(2);
                            self.zongPrice3=self.zongPrice2;
                            self.getMyOrderCoupon();
                        } else {

                        }
                    }
                });
            },
            //获取可用积分
            getIntegral:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/integral/getIntegral.html",
                    dataType:"JSON",
                    data:{

                    },
                    success:function(data){
                        if (data.code == 0) {
                            self.memberIntegral = data.data;
                            self.integralMoney=self.memberIntegral.integralMoney;
                        } else {

                        }
                    }
                });
            },
            //查询可用优惠劵
            getMyOrderCoupon:function () {
                var self = this;
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/coupon/getMyOrderCoupon.html",
                    dataType:"JSON",
                    data:{
                        productNum:self.productNum,
                        price:self.zongPrice,
                        productType:"1"
                    },
                    success:function(data){
                        if (data.code == 0) {
                           self.coupons = data.data;
                            if(self.coupons.length>0) {
                                self.couponId = self.coupons[0].couponId; //让select默认选中
                                self.sales_coupon = self.coupons[0].sales_coupon;
                                // self.priceCalculator();
                            }else {
                                var d = {};
                                d.couponId = "11111111xxxx";
                                d.sales_coupon="null";
                                self.coupons[0] = d;
                                self.couponId = self.coupons[0].couponId; //让select默认选中
                            }
                            // self.zongPrice = self.zongPrice - self.couponPrice;
                        } else {

                        }
                    }
                });
            },
            //价格计算器
            priceCalculator:function(){
                var self=this;
                var j = self.sales_coupon;
                self.zongPrice=self.totoalProductPrice;
                //满减劵
                if(j.type == '1'){
                    self.zongPrice = self.zongPrice - j.deductibleAmount;
                    self.zongPrice2=self.zongPrice*1+$("#freight").val()*1;
                }
                //免运费劵
                if(j.type == '2'){
                    self.yunPrice = 0;
                    self.zongPrice2=self.zongPrice;
                }
                //折扣劵
                if(j.type == '3'){
                    self.zongPrice = self.zongPrice * j.discount;
                    self.zongPrice2=self.zongPrice*1+$("#freight").val()*1;
                }

                self.zongPrice = (self.zongPrice*1).toFixed(2) ;
                self.zongPrice2 = (self.zongPrice2*1).toFixed(2) ;
                self.zongPrice3=self.zongPrice2;

            },
            save:function () {
                var json = '${productList}';

                if(this.address==null||this.address==""||this.address==undefined||this.address.id==""||this.address.id==undefined||this.address.id==null){
                    layer.open({
                        content: "请先填写收货地址!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    return;
                }
                var addressId = this.address.id;
                var couponId =this.couponId;
                var integral = $("#integralNum").val();
                if(integral/(this.integralMoney*1)>=this.zongPrice3-$("#freight").val()*1){
                    layer.open({
                        content: "兑换积分数量不能大于或等于商品总价!"
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                    return;
                }
                var integralToMoney = integral/(self.integralMoney*1);
                $.ajax({
                    type:"POST",
                    url:"${base!}/open/h5/order/checkStock.html",
                    dataType:"JSON",
                    data:{
                        productList:json
                    },
                    success:function(data){
                        if (data.code == 0) {
                            window.location.href="${base!}/open/h5/order/checkoutCounter.html?productList="+encodeURIComponent(json)+"&addressId="+addressId
                                +"&couponId="+couponId+"&integralMoney="+integral+"&cartIds=${cartIds!}";
                        } else {
                            layer.open({
                                content: "库存不足!"
                                ,skin: 'msg'
                                ,time: 2 //2秒后自动关闭
                            });
                            return;
                        }
                    }
                });

            }
        },
        selectCoupon:function(cid){
            for(var i =0 ; i<self.coupons.length; i++){
                if(cid==self.coupons[i].couponId){
                    self.sales_coupon==self.coupons[i].sales_coupon;
                }
            }
        },

        watch:{     //监听器
            couponId:function () {
                console.log("监听器开始执行：couponId");
                for(var i=0;i<this.coupons.length;i++){
                    if(this.coupons[i].sales_coupon !="null"){
                        var id = this.coupons[i].sales_coupon.id;
                        if(id == this.couponId){
                            this.sales_coupon = this.coupons[i].sales_coupon;
                        }
                    }
                }
                this.priceCalculator();
                $("#zongPriceSp").val(this.zongPrice);
            }
        }

    });

    function goAddress() {
        var json = '${productList}';
        window.location.href="${base!}/open/h5/address/goAddress.html?productList="+encodeURIComponent(json)
    }

</script>

</body>
</html>
